import { Button } from 'antd';
import type React from 'react';
import { useRef, useState } from 'react';
import Lang from '@/components/MapView/Mapless/lang';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const langRef = useRef<Lang>(undefined);

  const [disable, setDisable] = useState(true);

  const onInit = () => {
    if (maplessRef.current && !langRef.current) {
      langRef.current = new Lang(maplessRef.current);
      setDisable(false);

      langRef.current.switchMapboxLang('zh-Hans');
    }
  };

  const onEn = () => {
    langRef.current?.switchMapboxLang('en');
  };

  const onZh = () => {
    langRef.current?.switchMapboxLang('zh-Hans');
  };

  const onDzEn = () => {
    langRef.current?.switchDzmapLang('latin');
    // latin|en
  };

  const onDzZh = () => {
    langRef.current?.switchDzmapLang('nonlatin');
    // nonlatin|zh
  };

  return (
    <div className={styles.test}>
      <Button onClick={onInit}>Init</Button>
      <Button disabled={disable} style={{ marginLeft: 20 }} onClick={onZh}>
        mapbox:zh
      </Button>
      <Button disabled={disable} onClick={onEn}>
        mapbox:en
      </Button>
      <Button disabled={disable} style={{ marginLeft: 20 }} onClick={onDzZh}>
        dz:zh
      </Button>
      <Button disabled={disable} onClick={onDzEn}>
        dz:en
      </Button>
    </div>
  );
};

export default Index;
